@import 'default';
@import './component/banner';
@import './component/grid';
@import './component/tab';
@import './component/menu';
@import './component/form';
@import './component/account';

.content{
    width:1200px;
    height: auto;
    margin:0 auto;
    padding:0px 0px 20px;
    color: #656565;
    font-size: 14px;
    .red{
        color: #ff0101;
    }
    .blue{
        color: #169bd5;
    }
    .money-red {
        background: url(../img/static/money-red.png) no-repeat;
        width: 10px;
        height: 10px;
        display: inline-block;
    }
    .fs18{
        font-size: 18px;
    }
    .fs14{
        font-size: 14px;
    }
    .fl{
        float: left;
    }
}

.content-main{
    overflow: hidden;
    margin-top: 10px;
}
.content-main-left{
    width:163px;
    height:609px;
    border:1px solid #e8e8e8;
    border-right:0;
    float: left;
}
.content-main-right{
    width:974px;
    height:866px;
    border:1px solid #e8e8e8;
    float:right;
    padding: 0 30px;
    .content-main-right-top{
        .ml25{
            margin-left:25px;
        }
        .title{
            padding:21px 0 8px 10px;
            font-size:18px;
            border-bottom:1px solid #e8e8e8;
        }
        .change-game-list-btn{
            float: right;
            font-size: 14px;
            margin-top: 6px;
        }
    }
    .hide{
        display: none;
    }

    .game-exp-tab{
        overflow: hidden;
        margin-top: 10px;
        li{
            width: 110px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            float: left;
            border-top: 1px solid #e8e8e8;
            border-right: 1px solid #e8e8e8;
            border-bottom: 0;
            box-sizing: border-box;
            font-weight: bold;
            cursor: pointer;
            &.first{
                border-left: 1px solid #e8e8e8;
            }
            &.last{
                border-right: 1px solid #e8e8e8;
            }
            &.active{
                background: #f4f5f9;
                color: #ff0101;
            }
        }
        .search-top{
            float: right;
            border: 0;
            width: 260px;
            text-align: left;
            .search-input{
                width: 142px;
                height: 30px;
                line-height: 30px;
                border: 1px solid #e8e8e8;
                padding-left: 25px;
            }
            .search-btn{
                width: 86px;
                height: 30px;
                line-height: 30px;
                background: #006cbd;
                color: #fff;
                border-radius: 3px;
            }
        }
        
    }
    .all-select{
        padding: 25px 28px 60px;
        input[type=checkbox]{
            width: 15px;
            height: 15px;
            vertical-align: middle;
        }
        .delete-btn{
            width: 60px;
            height: 27px;
            border-radius: 3px;
            background: #656565;
            color: #fff;
            margin-left: 20px;
        }
    }
    .game-exp-list{
        border: 1px solid #e8e8e8;
        width: 973px;
        line-height: 40px;
        text-align: center;
        .tab-list{
            .tab-list-header{
                height: 40px;
                background: #f4f5f9;
                div{
                    float: left;
                }
                .game-name{
                    width: 180px;
                }
                .grade{
                    width: 100px;
                }
                .remain-coin{
                    width: 153px;
                }
                .progress{
                    width: 135px;
                }
            }
            .tab-list-body{
                .body-item{
                    height: 40px;
                    border-bottom: 1px solid #e8e8e8;
                    &.bg-color{
                        background: #f4f5f9;
                    }
                    div{
                        float: left;
                    }
                    &.last{
                        border: 0;
                    }
                }
            }
        }
    }

    .activity-list{
        overflow: hidden;
        padding-left: 40px;
        ul{
            float: left;
            width:865px;
            &.game-right{
                width:640px;
            }
        }
        .activity-item{
            position: relative;
            overflow: hidden;
            margin-top:28px;
            float: left;
            width:203px;
            height: 183px;
            margin-right:15px;
            &.mar-right{
                margin-right:0;
            }
        }
        .itemImgArea{
            height: 155px;
            position: relative;
            overflow: hidden;
        }
        .itemImg{
            width: 100%;
            height: 100%;
        }
        .itemDesc{
            font-size:12px;
            color:#fff;
            background: #606268;
            line-height: 24px;
            width:100%;
            position: absolute;
            bottom:0;
        }
        .itemDesc-left{
            float: left;
            margin-left:3px;
        }
        .itemDesc-right{
            color:#f4f800;
            float: right;
            margin-right:3px;
        }
        .reward-desc{
            font-size:13px;
            line-height: 1em;
            color:#576077;
            margin-top:11px;
            .number{
                color:#ff1800;
                padding-right:2px;
            }
        }
        .cover{
            width:100%;
            height: 100%;
            position: absolute;
            bottom:-100%;
            left:0;
            background: rgba(0,0,0,0.5);
            text-align: center;
        }
        .itemImgArea:hover .cover{
            bottom:0px;
            transition:0.5s;
            -webkit-transition:0.5s;
            -o-transition:0.5s;
            -moz-transition:0.5s;
        }
        .joinBtn{
            height: 35px;
            width:125px;
            display: block;
            margin:50px auto 0;
            text-align: center;
            line-height: 35px;
            background: #e02423;
            border-radius: 4px;
            font-size: 16px;
            color: #fff;
        }
        .joinCnt{
            text-align: center;
            line-height: 28px;
            font-size: 14px;
            color: #fff;
        }
        .money{
            background: url(../img/static/money.png) no-repeat;
            width:10px;
            height: 10px;
            display: inline-block;
        }
    }
}
